<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath}"/>
<%@ include file="common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
.main{ width:890px; height:auto; overflow:hidden; background:#303030;}
.box{ width:559px; height:auto; background:url(http://www.miaov.com/miaov_demo/qzone/img/bg1.jpg) no-repeat center top; margin:0 auto; overflow:hidden;}
.photo,.photo2{ margin:60px 0 10px 75px;}
.photo img{ padding:5px; border:1px #3d3d3d solid; cursor:-moz-zoom-in; cursor:-o-zoom-in; cursor:-webkit-zoom-in;cursor:url(http://www.miaov.com/miaov_demo/qzone/img/cursor_out.cur),pointer\9;vertical-align:bottom;}
.photo2{ display:none;}
.photo2 img{ cursor:-moz-zoom-out; cursor:-o-zoom-out; cursor:-webkit-zoom-out;cursor:url(http://www.miaov.com/miaov_demo/qzone/img/cursor_in.cur),pointer\9;vertical-align:bottom; -webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -O-transition:all 1s ease-in-out;}
.button{ overflow:hidden; margin:0 0 10px 0; height:21px;}
.text{ width:559px; height:76px; background:url(http://www.miaov.com/miaov_demo/qzone/img/bg2.jpg) no-repeat; margin:0 auto;}
.icon1,.icon2,.icon3{ width:24px; height:21px; overflow:hidden; background:url(http://www.miaov.com/miaov_demo/qzone/img/icon1.gif) no-repeat; display:block; float:left; display:inline; margin:0 10px 0 0;}
.icon2{ background:url(http://www.miaov.com/miaov_demo/qzone/img/icon2.gif) no-repeat;}
.icon3{ background:url(http://www.miaov.com/miaov_demo/qzone/img/icon3.gif) no-repeat;}
</style>
<script>
window.onload = function(){
var oMain = document.getElementById('main');
var aPhoto = getElementsByClassName(oMain,'div','photo');
var aPhoto2 = getElementsByClassName(oMain,'div','photo2');
var aButton = getElementsByClassName(oMain,'div','button');
var arrs = [];
var xs = [];
var ua = navigator.userAgent,isIE = null;
var sinDeg = 0, cosDeg = 0, timer = null;
if(/msie (\d+\.\d)/i.test(ua)){
isIE = document.documentMode || + RegExp['\x241'];
}
for(var i=0;i<aPhoto.length;i++){
var aButIcon1 = aButton[i].getElementsByTagName('a')[0];
var aButIcon2 = aButton[i].getElementsByTagName('a')[1];
aPhoto[i].index = i;
aPhoto2[i].index = i;
aButIcon1.index = i;
aButIcon2.index = i;
arrs.push(0);
xs.push(0);
aPhoto[i].onclick = toBig;
aPhoto2[i].onclick = toSmall;
aButton[i].onclick = function(ev){
var ev = ev || event;
ev.cancelBubble = true;
};
aPhoto[i].style.width = first(aPhoto[i]).width + 12 +'px';
aPhoto2[i].style.width = fullWidth(last(aPhoto2[i])) + 12 +'px';
aButIcon1.onclick = function(){
arrs[this.index] -= 90;
rotate(arrs[this.index],this.index);
count(arrs[this.index],this);
};
aButIcon2.onclick = function(){
arrs[this.index] += 90;
rotate(arrs[this.index],this.index,1);
count(arrs[this.index],this);
};
}
function rotate(num,obj,bon){
if(isIE){
var w = fullWidth(last(aPhoto2[obj]));
var h = fullHeight(last(aPhoto2[obj]));
var i = Math.abs(num)/90;
last(aPhoto2[obj]).style.filter = 'progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand")';
clearInterval(timer);
timer = setInterval(function(){
xs[obj] += bon==1 ? 5 : -5;
cosDeg = Math.cos(xs[obj] * Math.PI / 180);
sinDeg = Math.sin(xs[obj] * Math.PI / 180);
with(last(aPhoto2[obj]).filters.item(0)){
M11 = M22 = cosDeg; M12 = -(M21 = sinDeg);
}
if(i%2!=0){
if(bon){
if(isIE==8){
aPhoto2[obj].style.marginBottom = (xs[obj]-arrs[obj]+90)/90*(w/2-h/2)+"px";
}
}
else{
if(isIE==8){
aPhoto2[obj].style.marginBottom = (arrs[obj]-xs[obj]+90)/90*(w/2-h/2)+"px";
}
}
}
else{
if(bon){
aPhoto2[obj].style.marginBottom = (arrs[obj]-xs[obj])/90*(h/2-w/2) +"px";
}
else{
aPhoto2[obj].style.marginBottom = (xs[obj]-arrs[obj])/90*(h/2-w/2) +"px";
}
}
if(xs[obj]==arrs[obj]){
clearInterval(timer);
}
},30);
}
else if(last(aPhoto2[obj]).style.webkitTransform !== undefined){
last(aPhoto2[obj]).style.webkitTransform = 'rotate('+ arrs[obj] +'deg)';
}
else if(last(aPhoto2[obj]).style.MozTransform !== undefined){
last(aPhoto2[obj]).style.MozTransform = 'rotate('+ arrs[obj] +'deg)';
}
else if(last(aPhoto2[obj]).style.OTransform !== undefined){
last(aPhoto2[obj]).style.OTransform = 'rotate('+ arrs[obj] +'deg)';
}
else{
last(aPhoto2[obj]).style.transform = "rotate(" + arrs[obj] + "deg)";
}
}
function count(num,that){
var i = Math.abs(num)/90;
if(i%2!=0){
var w = fullWidth(last(aPhoto2[that.index]));
var h = fullHeight(last(aPhoto2[that.index]));
setTimeout(function(){
if(isIE){
if(isIE==8){
last(aPhoto2[that.index]).style.marginBottom = (w/2-h/2)+"px";
}
}
else{
last(aPhoto2[that.index]).style.margin = (w/2-h/2)+"px "+(h/2-w/2)+"px";
}
},10);
}
else{
last(aPhoto2[that.index]).style.margin = "0";
}
};
function toBig(){
this.style.display = 'none';
aPhoto2[this.index].style.display = 'block';
}
function toSmall(){
this.style.display = 'none';
aPhoto[this.index].style.display = 'block';
}
};
function drawImage(ImgD){
var image = new Image();
image.src = ImgD.src;
var width = fullWidth(ImgD);
var height = fullHeight(ImgD);
if(image.width > 0 && image.height > 0){
if(image.width / image.height >= width / height){
if(image.width > width){
ImgD.width = width;
ImgD.height = (image.height * width) / image.width;
}
else{
ImgD.width = image.width;
ImgD.height = image.height;
}
}
else{
if(image.height > height){
ImgD.height = height;
ImgD.width = (image.width * height) / image.height;
}
else{
ImgD.width = image.width;
ImgD.height = image.height;
}
}
}
}
function getElementsByClassName(oElem, strTagName, strClassName){
var arrElements = (strTagName == '*' && oElem.all) ? oElem.all : oElem.getElementsByTagName(strTagName);
var returnArrElements = new Array();
var oRegExp =  new RegExp('(^|\\s)' + strClassName + '($|\\s)');
for(var i=0; i<arrElements.length; i++){
if (oRegExp.test(arrElements[i].className)){
returnArrElements.push(arrElements[i]);
}
}
return (returnArrElements);
}
function next(elem){
do{
elem = elem.nextSibling;
}
while(elem && elem.nodeType != 1);
return elem;
}
function prev(elem){
do{
elem = elem.previousSibling;
}
while(elem && elem.nodeType != 1);
return elem;
}
function first(elem){
elem = elem.firstChild;
return elem && elem.nodeType != 1 ?
next(elem) : elem;
}
function last(elem){
elem = elem.lastChild;
return elem && elem.nodeType != 1 ?
prev(elem) : elem;
}
function fullHeight(elem){
if(getStyle(elem, 'display') != 'none')
return elem.offsetHeight || getHeight(elem);
var old = resetCSS( elem, {
display: '',
visibility: 'hidden',
position: 'absolute'
});
var h = elem.clientHeight || getHeight( elem );
restoreCSS(elem, old);
return h;
}
function fullWidth(elem){
if (getStyle( elem, 'display') != 'none')
return elem.offsetWidth || getWidth(elem);
var old = resetCSS(elem, {
display: '',
visibility: 'hidden',
position: 'absolute'
});
var w = elem.clientWidth || getWidth( elem );
restoreCSS(elem, old);
return w;
}
function resetCSS(elem, prop){
var old = {};
for (var i in prop){
old[ i ] = elem.style[ i ];
elem.style[ i ] = prop[i];
}
return old;
}
function restoreCSS(elem, prop){
for(var i in prop){
elem.style[ i ] = prop[ i ];
}
}
function getHeight(elem) {
return parseInt(getStyle(elem, 'height'));
}
function getWidth(elem) {
return parseInt(getStyle(elem, 'width'));
}
function getStyle(elem, name){
return (this.getStyle = document.defaultView
? function(elem, name){
var style = document.defaultView.getComputedStyle(elem, null);
return name in style ? style[ name ] : style.getPropertyValue( name );
}
: function(elem, name){
var style = elem.currentStyle;
if (name == "opacity") {
if ( /alpha\(opacity=(.*)\)/i.test(style.filter) ) {
var opacity = parseFloat(RegExp.$1);
return opacity ? opacity / 100 : 0;
}
return 1;
};
if (name == "float") { name = "styleFloat"; }
var ret = style[ name ] || style[ S.camelize( name ) ];
if ( !/^\-?\d+(px)?$/i.test( ret ) && /^\-?\d/.test( ret ) ) {
style = elem.style, left = style.left, rsLeft = elem.runtimeStyle.left;
elem.runtimeStyle.left = elem.currentStyle.left;
style.left = ret || 0;
ret = style.pixelLeft + "px";
style.left = left;
elem.runtimeStyle.left = rsLeft;
}
return ret;
}
)(elem, name);
}
</script>
</head>
<body>
<div id="main" class="main">
<div class="box">
<div class="photo"><img width="150" height="150" onload="drawImage(this)" src="http://www.miaov.com/miaov_demo/qzone/img/1.jpg" /></div>
<div class="photo2">
<div class="button">
<a href="javascript:void(0);" id="ss" class="icon1" title="逆时针旋转"></a>
<a href="javascript:void(0);" class="icon2" title="顺时针旋转"></a>
<a href="javascript:void(0);" class="icon3" title="查看原图"></a>
</div>
<img width="350" height="350" src="http://www.miaov.com/miaov_demo/qzone/img/1.jpg" onload="drawImage(this)" />
</div>
</div>
<div class="text"></div>
<div class="box">
<div class="photo"><img width="150" height="150" onload="drawImage(this)" src="http://www.miaov.com/miaov_demo/qzone/img/2.jpg" /></div>
<div class="photo2">
<div class="button">
<a href="javascript:void(0);" class="icon1" title="逆时针旋转"></a>
<a href="javascript:void(0);" class="icon2" title="顺时针旋转"></a>
<a href="javascript:void(0);" class="icon3" title="查看原图"></a>
</div>
<img width="350" height="350" src="http://www.miaov.com/miaov_demo/qzone/img/2.jpg" onload="drawImage(this)" />
</div>
</div>
<div class="text"></div>
<div class="box">
<div class="photo"><img width="150" height="150" onclick="drawImage(this)" src="http://www.miaov.com/miaov_demo/qzone/img/3.jpg" /></div>
<div class="photo2">
<div class="button">
<a href="javascript:void(0);" class="icon1" title="逆时针旋转"></a>
<a href="javascript:void(0);" class="icon2" title="顺时针旋转"></a>
<a href="javascript:void(0);" class="icon3" title="查看原图"></a>
</div>
<img width="350" height="350" src="http://www.miaov.com/miaov_demo/qzone/img/3.jpg" onload="drawImage(this)" />
</div>
</div>
<div class="text"></div>
</div>
</body>
</html>